<template>
  <div class="exam">
    <!-- 头部 -->
    <div class="exam_sub">
      <span class="title">{{kindType[$route.query.kind]}}</span>
      <div class="sub_exit">
        <span class="save" @click="saveClick()">保存</span>
        <span class="submit" @click="submitClick()" ref="submit">提交</span>
      </div>
    </div>

    <div class="exam_area">
      <!-- 页面题号部分 -->
      <exam-total />

      <!-- 页面答题部分 -->
      <answer @timeOut="timeOutBySubmit" />
    </div>

    <div class="hint" v-show="showMsg">{{msg}}</div>
  </div>
</template>

<script>
import answer from './childComps/answer';
import examTotal from './childComps/examTotal';

import Bus from '@/common/bus';

export default {
  name: 'StudentExam',
  data() {
    return {
      topicList: [],
      kindType: ['作业', '考试'],
      showMsg: false,
      msg: null,
    };
  },
  components: {
    answer,
    examTotal,
  },
  mounted() {
    this._topic();
  },
  methods: {
    _topic() {
      // 单选题完成题题号数
      Bus.$on('radioTopic', (finishData) => {
        this.topicOk(finishData);
      });

      // 多选题完成题题号数
      Bus.$on('multipleTopic', (finishData) => {
        this.topicOk(finishData);
      });

      // 判断题完成题题号数
      Bus.$on('judgeTopic', (finishData) => {
        this.topicOk(finishData);
      });

      // 填空题完成题题号数
      Bus.$on('fillTopic', (finishData) => {
        this.topicOk(finishData);
      });

      // 综合题完成题题号数
      Bus.$on('synthesizeTopic', (finishData) => {
        this.topicOk(finishData);
      });
    },

    topicOk(data) {
      // 判断是否存在该对象
      for (let i = 0; i < this.topicList.length; i++) {
        if (this.topicList[i].id == data.topicList.id) {
          this.topicList.splice(i, 1);
        }
      }

      // 添加数据(判断该题是否完成)
      if (data.finish) {
        this.topicList.push(data.topicList);
      }

      console.log(this.topicList);
    },

    saveClick() {
      // 1. 提交数据
      let url = `/edu-task/s_saveStudentTask`;
      let status = '1';
      this.submit(url, status);

      // 2. 如果是考试就退出界面
      this.$router.push('/studentCourse');
    },

    submitClick() {
      let flag = false; /* 标记是否跳转出去 */

      // 1. 获取题目
      console.log(this.topicList);

      // 2. 判断是否做完
      let msg = false;
      const count = document.querySelector('.count').innerHTML.split('：')[1]; /* 总题量 */
      if (this.topicList.length != count) {
        msg = confirm('你的题还没做完，是否确定提交');
      } else {
        msg = confirm('确定提交');
      }
      if (msg) {
        flag = true;
      } else {
        flag = false;
      }

      if (flag) {
        // 3. 判断是否为平时作业
        if (this.$route.query.kind == 0) {
          Bus.$emit('submit');
        }

        let url = `/edu-task/s_saveStudentTask`;
        let status = '2';
        this.submit(url, status);

        // 5. 退出界面
        // this.$router.push('/studentCourse');
      }
    },

    submit(url, st) {
      let time = this.getTime(); /* 提交时间 */
      alert(time);

      this.$http({
        url: this.$http.adornUrl(url),
        method: 'post',
        data: this.$http.adornData(
          {
            submitTime: time /* 提交时间 */,
            taskId: this.$route.query.courseId /* 作业ID */,
            usename: this.$store.state.user.id /* 学生ID */,
            status: st /* 作业类型 */,
            topicList: this.topicList /* 选择的选项 */,
          },
          false
        ),
      }).then(({ data }) => {
        if (data && data.code === 20000) {
          this.$message({
            message: '作业提交成功',
            type: 'success',
          });
        } else {
          this.$message.error('未能成功保存作业！');
        }
      });
    },

    getTime() {
      let date = new Date();

      let nYear = date.getFullYear();
      let nMonth = date.getMonth() + 1;
      let nDay = date.getDate();
      let nHour = date.getHours();
      let nMinute = date.getMinutes() + 1;
      let nSecond = date.getSeconds();

      let currentTime =
        nYear +
        '-' +
        (nMonth < 10 ? '0' + nMonth : nMonth) +
        '-' +
        (nDay < 10 ? '0' + nDay : nDay) +
        ' ' +
        (nHour < 10 ? '0' + nHour : nHour) +
        ':' +
        (nMinute < 10 ? '0' + nMinute : nMinute) +
        ':' +
        (nSecond < 10 ? '0' + nSecond : nSecond);

      return currentTime;
    },

    timeOutBySubmit() {
      // 时间已到触发提交事件
      this.$refs['submit'].click();
    },
  },
  beforeDestroy() {
    Bus.$off('initTab');

    Bus.$off('radioTopic');
    Bus.$off('multipleTopic');
    Bus.$off('judgeTopic');
    Bus.$off('fillTopic');
    Bus.$off('synthesizeTopic');
  },
};
</script>

<style scoped>
.exam {
  position: relative;
  top: -25px;
  left: -86px;
  right: 0;
  width: 100vw;
  padding: 50px;
  z-index: 1000;
  background-color: #f2f4f7;
}

.exam .exam_sub {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  z-index: 100;
  background: #3a4357;
  text-align: center;
  line-height: 40px;
  color: #a8a8b3;
}
.exam_sub .sub_exit {
  float: right;
  width: 200px;
  height: inherit;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.exam_sub .sub_exit span {
  flex: 1;
  line-height: 40px;
  height: inherit;
  text-align: center;
}
.exam_sub .sub_exit span:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.exam_sub .sub_exit .submit {
  background-color: #3a8bff;
}

.exam .exam_area {
  /* margin: 30px 0 0 50px; */
  margin-top: 30px;
  display: flex;
  justify-content: center;
  user-select: none;
}

.hint {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 65px;
  background-color: #181e33;
  opacity: 0.5;
  border-radius: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8186ff;
  font-size: 24px;
}
</style>